<template>
    <div class="userSetting">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="设置"
                    left-arrow
                    @click-left="toBack">
            </van-nav-bar>
        </div>
        <div class="userSection">
            <div class="text-center-pk list-item-pad-pk bg-white-pk">
               <div>
                    <van-uploader :before-read="beforeRead" :after-read="afterRead" :preview-full-image="false" :deletable="false">
                        <pk-img
                                round
                                :src="tempFilePath"
                                width="60px"
                                height="60px">
                        </pk-img>
                    </van-uploader>
                </div>
                <div>
                    点击修改头像
                </div>
            </div>
            <div class="">
                <van-cell center title="账号" :value="userInfo.phone" value-class="valueItem"></van-cell>
                <van-cell center title="昵称" :value="userInfo.nickName"  value-class="valueItem"  is-link @click="setNickName"></van-cell>
                <van-cell v-if="userInfo.sex==='0'" center title="性别" value="男"  value-class="valueItem"  is-link @click="setSex"></van-cell>
                <van-cell v-if="userInfo.sex==='1'" center title="性别" value="女"  value-class="valueItem"  is-link @click="setSex"></van-cell>
                <van-cell center title="地区" value=""  value-class="valueItem"  is-link></van-cell>
                <van-cell center title="个性签名" :value="userInfo.signature"  value-class="valueItem"  is-link @click="setSignature"></van-cell>
                <van-cell center title="注册时间" :value="userInfo.registerTime"  value-class="valueItem"  is-link></van-cell>
                <van-cell center title="收货地址" :value="userInfo.address"  value-class="valueItem"  is-link to="addressList"></van-cell>
            </div>
            <div class="userInfo">
                <van-cell center title="绑定手机" :value="userInfo.phone"  value-class="valueItem"  is-link></van-cell>
                <van-cell v-if="isBindWx==='0'" center title="绑定微信" value="未绑定"  value-class="valueItem"  is-link @click="bindWeChat"></van-cell>
                <van-cell v-if="isBindWx==='1'" center title="绑定微信" value="已绑定"  value-class="valueItem"  is-link ></van-cell>
                <van-cell center title="修改登录密码" value=""  value-class="valueItem"  is-link @click="resetPassword"></van-cell>
                <van-cell center title="修改支付密码" value=""  value-class="valueItem"  is-link @click="updatePwd"></van-cell>
            </div>
            <div class="text-center-pk btn text-white-pk" @click="logout">
                <div class="operateBtn">退出登录</div>
            </div>
        </div>
        <div class="setInfo">
            <div class="showItem">
                <van-popup v-model="showNickName" closeable :style="{ height: '150px',width:'80%' }" :lock-scroll="lockScroll">
                    <div class="text-center-pk setNickName">
                        <div>修改昵称</div>
                        <div class="itemName">
                            <van-field v-model="nickName" :focus="inputFocus" placeholder="请输入昵称"></van-field>
                        </div>
                        <div class="submitBtn text-white-pk" @click="submitNickName">确定</div>
                    </div>
                </van-popup>
            </div>
            <div class="showItem">
                <van-popup v-model="showSignature" closeable :style="{ height: '150px',width:'80%' }" :lock-scroll="lockScroll">
                    <div class="text-center-pk setNickName">
                        <div>修改个性签名</div>
                        <div class="itemName">
                            <van-field v-model="signature" :focus="inputFocus" placeholder="请输入个性签名"></van-field>
                        </div>
                        <div class="submitBtn text-white-pk" @click="submitSignature">确定</div>
                    </div>
                </van-popup>
            </div>
            <div class="showSex">
                <van-popup v-model="showSex"  :style="{ height: '190px',width:'80%'}" >
                    <div class="text-center-pk setSex bg-white-pk">
                        <div class="chooseItem light-border-bottom-gray">性别选择</div>
                        <div class="light-border-bottom-gray">
                            <div class="itemName text-color-blue-pk" @click="submitSex(0)">
                                男
                            </div>
                        </div>
                        <div class="itemName text-color-blue-pk"  @click="submitSex(1)">
                            女
                        </div>
                    </div>
                    <div class="text-center-pk submitBtn text-color-blue-pk bg-white-pk" @click="showSex=false">取消</div>
                </van-popup>
            </div>
        </div>
        <div class="setPayPassword">
            <van-popup closeable v-model="payPasswordShow" :style="{ height: '220px',width:'80%' }">
                <div class="page-pad-pk list-item-pad-pk updatePswd text-center-pk">
                    <div>修改支付密码</div>
                    <div class="d-flex-pk itemWrap">
                        <div class="itemName">
                            <van-field v-model="payPasswordForm.smsCode" placeholder="请输入短信验证码" />
                        </div>
                        <div class="sendBtn bg-D82D11" @click="sendValid" >
                            {{countTips}}
                        </div>
                    </div>
                    <div class="inputItem">
                        <van-field v-model="payPasswordForm.payPassword" type="password" placeholder="请输入6位新密码" />
                    </div>
                    <div class="sureBtn" @click="submitPassword">确定</div>
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
    import PkImg from "../../components/PkImg";
    export default{
        name:"userSetting",
        components:{
            PkImg
        },
        data(){
            return{
                userInfo:{},
                userId:"",
                tempFilePath:"",
                showNickName:false,//修改昵称弹出框
                inputFocus:false,
                lockScroll:true,
                nickName:"",
                showSignature:false,//修改个性签名弹出框
                signature:"",
                showSex:false,//修改性别弹出框
                sex:"",
                male:"男",
                isBindWx:"",//是否绑定微信
                payPasswordShow:false,//修改支付密码弹出框
                payPasswordForm:{
                    smsCode:"",//验证码
                    payPassword:"",//支付新密码

                },
                countTips: "发送验证码",
                mesSending: false,
            }
        },
        created(){
            this.getUserInfo();
        },
        methods:{
            toBack(){
                this.$router.push({
                    name:'personalCenter'
                })
            },
            //获取用户信息
            getUserInfo(){
                this.$api.getUserInfo('1').then(res=>{
                    let result=this.$resData(res);
                    if(result){
                        this.userInfo=result;
                        this.tempFilePath=result.headPortrait;
                        this.isBindWx=result.isBindWx
                    }
                })
            },
            // 返回布尔值
            beforeRead(file) {
                if (file.type !== 'image/jpeg') {
                    this.$toast({
                        message:"请上传 jpg 格式图片"
                    });
                    return false;
                }
                return true;
            },
            afterRead(file) {
                //this.tempFilePath=this.$refs.headImg.src=file.content;
                //let url = this.$api.image();
                //构造一个 FormData，把后台需要发送的参数添加
                // 接口需要传的参数
                //将formDate文件上传到服务器，会返回图片地址imgUrl
                let formData=new FormData();
                formData.append('file', file.file);
                this.$api.image(formData).then(res => {
                    let imgUrl=this.$resData(res);
                    if(imgUrl){
                        this.tempFilePath=imgUrl;
                        this.$api.modHeadPortrait({
                            headPortrait:imgUrl
                        }).then(res=>{
                           if(res.status===200){
                                this.getUserInfo();
                                this.$toast({
                                    message:"修改头像成功"
                                })
                            }else{
                                this.$toast({
                                    message:"修改头像失败"
                                })
                            }
                        })

                    }else{
                        this.$toast({
                            message:"网络请求失败"
                        })
                    }
                });

            },
            //修改昵称
            setNickName(){
                this.showNickName = true;
                this.inputFocus=true;
            },
            submitNickName(){
                this.$api.modNickName({
                    nickName:this.nickName
                }).then(res=>{
                    let result=this.$resResult(res);
                    if(result){
                        this.showNickName=false;
                        this.$toast({
                            message:"修改成功"
                        });
                        this.getUserInfo();
                    }else{
                        this.$toast({
                            message:"修改失败"
                        })
                    }
                })
            },
            //修改个性签名
            setSignature(){
                this.showSignature=true
            },
            submitSignature(){
                this.$api.modSignature({
                    signature:this.signature
                }).then(res=>{
                    let result=this.$resResult(res);
                    if(result){
                        this.showSignature=false;
                        this.$toast({
                            message:"修改成功"
                        });
                        this.getUserInfo();
                    }else{
                        this.$toast({
                            message:"修改失败"
                        })
                    }
                })
            },
            setSex(){
                this.showSex=true;
            },
            submitSex(value){
                this.$api.modSex({
                    sex:value
                }).then(res=>{
                    let result=this.$resResult(res);
                    if(result){
                        this.showSex=false;
                        this.$toast({
                            message:"修改成功"
                        });
                        this.getUserInfo();
                    }else{
                        this.$toast({
                            message:"修改失败"
                        })
                    }
                })
            },
            updatePwd(){
                this.payPasswordShow=true;
            },
            logout () {
                this.$util.logoutSaveData();
                this.$router.push({
                    name:"login"
                })
            },
            //发送验证码
            sendValid() {
                let phone=this.userInfo.phone
                if(!this.$valid.phone(phone)) {
                    return
                }
                //发送中，不在请求
                if(this.mesSending) {
                    return
                }
                this.mesSending = true;
                this.$api.editPayPasswordCode().then( res => {
                    if(this.$resResult(res)) {
                        this.getCount();
                    }else {
                        this.mesSending = false;
                    }
                });
            },
            //计数倒数60秒
            getCount() {
                let count = 60;
                this.countTips = count + "秒";
                if(!this.validCodeTimer) {
                    this.validCodeTimer = setInterval(()=> {
                        if(count > 0 ) {
                            count --;
                            this.countTips = count + "秒";
                        }else {
                            clearInterval(this.validCodeTimer);
                            this.validCodeTimer = null;
                            this.mesSending = false;
                            this.countTips = "重新发送";
                        }
                    }, 1000)
                }
            },
            //提交新支付密码
            submitPassword(){
                this.$toast.loading();
                if(this.payPasswordForm.smsCode && this.payPasswordForm.payPassword){
                    this.$api.getDynamicSecretKey().then( getKeyRes => {
                        let getKeyResult = this.$resData(getKeyRes);
                        if (getKeyResult) {
                            let userKey = getKeyResult.userKey;
                            this.$api.modPayPasswordByCode({
                                "payPassword": this.payPasswordForm.payPassword,
                                "smsCode": this.payPasswordForm.smsCode,
                                "userKey": userKey
                            }).then(() => {
                                this.$toast.clear();
                                //let result=this.$resResult(res)
                                //console.log(result)
                                /*if (this.$resResult(res)) {
                                    this.$toast({
                                        message: '修改成功'
                                    });

                                }*/
                                this.payPasswordShow = false;
                                this.payPasswordForm="";
                            })
                        }
                    })
                }else{
                    this.$toast({
                        message:'请输入完整'
                    })
                }
            },
            //重置密码
            resetPassword(){
                let phone=this.userInfo.phone
                if(this.$valid.phone(phone)) {
                    this.$router.push({path: "/passwordReset", query: {phone: phone}})
                }
            },
            //绑定微信
            bindWeChat(){

            },
        }
    }
</script>
<style lang="scss" scoped>
    .userSetting{
        line-height: 2;
        font-size: 14px;
        color: #1A1A1A;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .userSection{
            padding-top: 45px;
            .valueItem{
                font-size: 13px;
                color: #999999;
            }
            .userHeadImg{
                border-radius: 50%;
            }
        }
        .userInfo{
            margin-top: 10px;
        }
        .btn{
            width: 22em;
            margin: 10px auto 0;
            background-color: #D82D11;
            border-radius: 5px;
        }
        .operateBtn{
            padding: 15px;
            display: inline-block;
            box-sizing: border-box;
            line-height: 14px;
        }
        .setInfo{
            .showItem{
                .van-popup--center {
                    top: 250px;
                }
                .van-cell{
                    padding: 6px 16px;
                    color: #323233;
                    line-height: 20px;
                    background: none;
                }
                .setNickName{
                    padding-top: 13px;
                    .itemName{
                        width: 80%;
                        margin:10px auto;
                        border: 1px solid #999999;
                        border-radius: 5px;
                    }
                    .submitBtn{
                        width: 80%;
                        border-radius: 5px;
                        background-color: #ccc;
                        margin: 10px auto;
                        padding: 5px 0;
                    }
                }
            }
            .showSex{
                .van-popup--center {
                    top: 85%;
                    border-radius: 10px;
                    background-color: rgba(0, 0, 0, 0.01);
                }
                .setSex{
                    border-radius: 20px;
                    padding-bottom: 5px;
                }
                .chooseItem{
                    padding: 10px 0;
                }
                .itemName{
                    width: 85%;
                    margin:5px auto;
                }
                .submitBtn{
                    border-radius: 10px;
                    margin: 10px auto;
                    padding: 5px 0;
                }

            }

        }
        .setPayPassword{
            .van-popup--center {
                top: 220px;
                border-radius: 10px;
            }
            .updatePswd{
                .van-cell{
                    padding: 6px 16px;
                    color: #323233;
                    line-height: 20px;
                    background: none;
                }
                .itemWrap{
                    padding: 10px 0;
                    align-items: center;
                    .itemName{
                        width: 70%;
                        border: 1px solid #999999;
                        border-radius: 5px;
                    }
                    .sendBtn{
                        width:28%;
                        margin-left: 5px;
                        padding: 0 5px;
                        color: #fff;
                        border-radius: 5px;
                    }
                }
                .sureBtn{
                    border-radius: 5px;
                    background-color: #cccccc;
                    padding: 3px;
                    color: white;
                }
                .bg-gray{
                    background-color: #EEEEEE;
                }
                .inputItem{
                    border: 1px solid #999999;
                    border-radius: 5px;
                    margin-bottom: 10px;

                }

            }
        }
    }
</style>
